<template>
  <div class="pzWrapper" ref="configDom">
    <section class="config-section self-scroll">
      <!-- <div class="textPosition textPosition-radio">
        <div class="title">节点形状</div>
        <el-radio-group v-model="nodeShape" @change="changeHandle">
          <el-radio label="2">纯色圆点</el-radio>
          <el-radio label="1">缩略图</el-radio>
        </el-radio-group>
      </div> -->
      <div class="textPosition textPosition-radio">
        <div class="title">节点标签</div>
        <el-radio-group v-model="nodeLabel" @change="changeHandle">
          <el-radio label="1">文字置底</el-radio>
          <el-radio label="2">文字内嵌</el-radio>
        </el-radio-group>
      </div>
      <div class="nodeTableWrapper nodeTable">
        <div class="title">节点样式</div>
        <el-table
          :data="node_type_data"
          :cell-style="{
            borderColor: '#F2F2F2',
            padding: '4px 0',
            color: '#333333',
          }"
          style="width: 100%"
          max-height="249px"
          :header-cell-style="{
            background: 'rgba(61, 96, 212, 0.12)',
            height: '32px',
            padding: '0',
            color: '#333333',
          }"
          @selection-change="handleSelectionChangeOfNode"
          class="node-table"
        >
          <el-table-column type="selection" width="56" align="center">
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="left"
            prop="ontologyName"
            label="选项"
            width="120"
          >
            <!-- <template slot-scope="scope">
                <span>{{ scope.row.label }}</span>
              </template> -->
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="center"
            prop="color"
            label="颜色"
            width="80"
          >
            <template slot-scope="scope">
              <el-color-picker
                v-model="scope.row.color"
                size="mini"
                @change="changeNodeColor(scope.row)"
              >
              </el-color-picker>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="center"
            prop="radius"
            label="半径"
            width="150"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.radius"
                class="table-input-number"
                controls-position="right"
                @input="changeNodeSize(scope.row)"
                :key="scope.row.id"
                size="small"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div v-if="hasMoreNode" @click="changeShowState('node')">
            {{ showAllNode ? '收起' : '查看全部 >>' }}
          </div> -->
      </div>
      <div class="edgeTableWrapper">
        <div class="title">连边样式</div>
        <el-table
          :data="edge_config_data"
          :cell-style="{
            borderColor: '#F2F2F2',
            padding: '4px 0',
            color: '#333333',
          }"
          style="width: 100%"
          height="238px"
          :header-cell-style="{
            background: 'rgba(61, 96, 212, 0.12)',
            height: '32px',
            padding: '0',
            color: '#333333',
          }"
          @selection-change="handleSelectionChangeOfEdge"
          class="node-table"
        >
          <el-table-column type="selection" width="50" align="center">
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="left"
            prop="label"
            label="选项"
            width="100"
          >
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="center"
            prop="color"
            label="颜色"
            width="50"
          >
            <template slot-scope="scope">
              <el-color-picker
                v-model="scope.row.color"
                size="mini"
                @change="changeEdgeColor(scope.row)"
              >
              </el-color-picker>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="center"
            prop="edgeWidth"
            label="宽度"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.edgeWidth"
                placeholder=""
                @input="changeEdgeSize(scope.row)"
                class="table-input-number"
                controls-position="right"
                size="small"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            :show-overflow-tooltip="true"
            align="center"
            prop="isArrow"
            label="箭头"
            width="50"
          >
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.isArrow"
                @change="changeEdgeArrow(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div v-if="hasMoreEdge" @click="changeShowState('edge')">
            {{ showAllEdge ? '收起' : '查看全部 >>' }}
          </div> -->
      </div>
      <!-- <div class="submit-btn">
          <i class="iconfont iconsave"></i>
          <el-button type="text" @click="save('detail')">保存</el-button>
        </div> -->
    </section>
    <div class="btn" @click="save('detail')">保存</div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { EventBus } from '@/views/server/knowledge-management/eventBus'
export default {
  name: 'graphConfig',
  props: {},
  data() {
    return {
      nodeShape: '2', // 1 缩略图，2圆
      nodeLabel: '1', // 1 文字置地，2文字内嵌
      selectedNodes: [], // 选中的节点列表
      selectedEdges: [], // 选中的边列表
      eleLoading: null,
      ontologyAllId: null,
      node_type_data: [],
      edge_type_data: [],
    }
  },
  created() {
    this.ontologyAllId = this.$route.params.id
    this.getEntityType()
  },
  computed: {
    ...mapState({
      node_config_data: (state) => state.ontologyModel.node_config_data, // 节点数据
      edge_config_data: (state) => state.ontologyModel.edge_config_data, // 边数据
    }),
  },
  methods: {
    ...mapMutations({
      change_node_config_data: 'ontologyModel/change_node_config_data',
      change_edge_config_data: 'ontologyModel/change_edge_config_data',
    }),
    getEntityType() {
      this.$axios
        .get(
          `${this.$api.knowledgeMap.getEntityType}/${this.$store.state.knowledgeMap.projectMsg.projectId}`
        )
        .then((res) => {
          const { data, code, message } = res.data
          if (code === 200) {
            // this.$message.success(message);
            data.list.forEach((item) => {
              item.radius = 16
            })
            this.node_type_data = data.list
          } else {
            this.$message.error(message)
          }
        })
    },
    // changeShowState(type) {
    //   switch (type) {
    //     case 'node':
    //       this.showAllNode = !this.showAllNode
    //       break
    //     case 'edge':
    //       this.showAllEdge = !this.showAllEdge
    //   }
    // },
    handleSelectionChangeOfNode(val) {
      this.selectedNodes = val
      console.log('selectedNodes', this.selectedNodes)
    },
    handleSelectionChangeOfEdge(val) {
      this.selectedEdges = val
    },
    // 节点颜色变化
    changeNodeColor(e, index) {
      EventBus.$emit('changeNodeColorOrSize', e)
    },
    changeNodeSize(e) {
      EventBus.$emit('changeNodeColorOrSize', e)
    },
    changeEdgeColor(e) {
      let id = e.id
      if (id === -1) {
        let color = e.color
        this.change_edge_config_data({
          edges: this.selectedEdges,
          color,
        })
      }
    },
    changeEdgeSize(e) {
      let id = e.id
      if (id === -1) {
        let edgeWidth = e.edgeWidth
        this.change_edge_config_data({
          edges: this.selectedEdges,
          edgeWidth,
        })
      }
    },
    changeEdgeArrow(e) {
      let id = e.id
      if (id === -1) {
        let isArrow = e.isArrow
        this.change_edge_config_data({
          edges: this.selectedEdges,
          isArrow,
          type: 'isArrow',
        })
      }
    },
    // 节点形状和标签变化
    changeHandle() {
      this.$emit('changeGraphConfig', {
        nodeShape: this.nodeShape,
        nodeLabel: this.nodeLabel,
      })
    },
    // 保存更改的节点和边颜色
    save() {
      this.eleLoading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)',
        fullscreen: false,
        target: this.$refs.configDom,
      })
      let toData = {
        node: this.node_type_data,
        eleLoading: this.eleLoading,
      }
      this.$emit('saveConfig', toData)
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../assets/scss/scroll';

.pzWrapper {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: MicrosoftYaHei;
  color: #333333;
  font-size: 14px;

  .config-section {
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
    height: calc(100% - 64px);
  }

  .btn {
    height: 32px;
    background: #4b71eb;
    border-radius: 2px;
    border: 1px solid #4b71eb;
    line-height: 32px;
    text-align: center;
    cursor: context-menu;
    margin: 16px;
    box-sizing: border-box;
    color: #ffffff;
  }

  .textPosition {
    text-align: left;
    margin-bottom: 20px;

    .title {
      margin-bottom: 8px;
      width: 64px;
      height: 21px;
      color: #333333;
      line-height: 21px;
    }
  }

  .nodeTable {
    margin-bottom: 22px;
  }

  .node-table {
    border: 1px solid #f2f2f2;

    /deep/ .el-table__body-wrapper {
      overflow-x: hidden;
      max-height: 204px !important;

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #b7bbc7;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ffffff;
      }
    }

    /deep/ .gutter {
      background: rgba(61, 96, 212, 0.12);
    }

    /deep/ .el-color-picker--mini {
      text-align: -webkit-right;
      vertical-align: -webkit-baseline-middle;
    }

    /deep/ td {
      border-bottom: none;
    }

    /deep/ th.is-leaf {
      border-bottom: none;
    }

    /deep/ .el-input__inner {
      box-shadow: none;
    }
  }
}

.nodeTableWrapper {
  .title {
    text-align: left;
    height: 21px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 8px;
  }

  .footWrapper {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;

    div:nth-of-type(1) {
      height: 16px;
      color: #999999;
      line-height: 16px;
    }
  }
}

.edgeTableWrapper {
  .title {
    text-align: left;
    height: 21px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 8px;
  }

  /deep/ .el-table {
    .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
  }

  /deep/ .el-table__header-wrapper {
    background: rgba(61, 96, 212, 0.12);
  }

  .footWrapper {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;

    div:nth-of-type(1) {
      height: 16px;
      color: #999999;
      line-height: 16px;
    }
  }
}

/deep/ .el-checkbox {
  .el-checkbox__label {
    height: 19px;
    color: #333333;
    line-height: 19px;
  }
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #4b71eb;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  height: 19px;
  color: #333333;
  line-height: 19px;
}

/deep/ .el-radio {
  color: #333333;

  .el-radio__inner {
    background: #fff;
    border-color: #b7bbc7;

    &::after {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #4b71eb;
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
}

/deep/ .el-table .cell.el-tooltip {
  padding-left: 6px;
}

/deep/ .el-color-picker__trigger {
  padding-left: 0;
  border: none;
  width: 16px;
  height: 16px;
}

/deep/ .el-color-picker__icon {
  display: none;
}

/deep/ .el-color-picker__color {
  width: 16px;
  height: 16px;
  border: none;
}

/deep/ .el-color-picker__color-inner {
  border-radius: 50%;
  border: none;
}

.submit-btn {
  position: absolute;
  top: 0;
  right: 50px;
}

.table-input-number {
  width: 88px;
  height: 32px;

  /deep/ .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
  }

  /deep/ .el-input-number__increase {
    width: 26px;
  }

  /deep/ .el-input-number__decrease {
    width: 26px;
  }
}

.textPosition-radio {
  /deep/ .el-radio__inner {
    background: none !important;
  }

  /deep/ .el-radio__label {
    color: #666;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #666;
  }
}
</style>
